<template>
  <div>
    <mt-header title="中国潮牌">
      <mt-button icon="back" slot="left"></mt-button>
      <router-link  slot="right" to="/register">
      <mt-button>注册</mt-button>
      </router-link>
    </mt-header>
    <mt-field
      type="text"
      label="用户名"
      placeholder="请输入用户名"
      v-model="name"
      :state="nameState"
    ></mt-field>
    <mt-field
      type="password"
      label="密码"
      placeholder="请输入密码"
      v-model="pwd"
      :state="pwdState"
    ></mt-field>
    <mt-button type="primary" size="large" @click="logFrom">快速登录</mt-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      pwd: "",
      nameState: "",
      pwdState: "",
    };
  },
  methods: {
    logFrom() {
      this.logName(), 
      this.logPwd(),
      this.logIn()
    },
    logName() {
      let reg = /^\w{6,15}$/;
      if (reg.test(this.name)) {
        this.nameState = "success";
      } else {
        this.nameState = "error";
      }
    },
    logPwd() {
      let rep = /^\w{6}$/;
      if (rep.test(this.pwd)) {
        this.pwdState = "success";
      } else {
        this.pwdState = "error";
      }
    },
    logIn(){
      if(this.nameState == "success" && this.pwdState == "success"){
        this.$router.push('/')
      }
    },
  },
};
</script>

